<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <!-- 
      v-if="表达式1"
      v-else-if="表达式2"
      e-else
     -->
     <p>当前分数: {{score}}</p>
     <p v-if="score<50">你不适合学前端</p>
     <p v-else-if="score<60">你自学一段时间, 再来复试</p>
     <p v-else>你通过了</p>

     <button @click="score = score + 6">更新分数</button>

     <p v-show="score<50">你不适合学前端</p>
     <p v-show="score>=50 && score<60">你自学一段时间, 再来复试</p>
     <p v-show="score>=60">你通过了</p>

     <!-- 必须用v-if, 不能用v-show的情况 -->


     <!-- 
      区别:
        隐藏时: v-if删除标签, v-show通过display为none
        重新显示: v-if重新创建, v-show只需要修改diplay的样式(不需要创建标签)
        更新显示的效率: v-show更快, v-if慢些(需要创建标签)
        v-show是利用空间换时间: 隐藏时占用更大的空间, 来换取重新显示时更快
        适合用v-show:
          如果界面切换频繁或者DOM较大时
        适合用v-if: 
          在模板中初始读取空对象或数组中内部对象中的数据  {{a.b.c}}

      -->
      <!-- <div v-show="product.address"> -->
      <div>title: {{product.title}}</div>
      <!-- <div v-if="product.address"> -->
      <div>
        <h3>产地信息</h3>
        <template v-if="product.address">
          <p>name: {{product.address.name}}</p>
          <p>code: {{product.address.code}}</p>
          <p>xxx: {{product.address.xxx}}</p>
        </template>
      </div>

  </div>

  <script src="../js/vue.js"></script>
  <script>
     const vm = new Vue({
      el: '#test',
      data: {
        score: 46,
        product: {}
      }
    })

    setTimeout(() => {
      vm.product = {
        id: 1,
        title: 'AAAA',
        price: 23,
        address: {
          name: '武汉',
          code: 123,
          xxx: 'abc'
        }
      }
    }, 2000);
  </script>
</body>
</html>